<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <title>欢迎页</title>

    <link rel="stylesheet" href="/css/vendor/common.css" type="text/css">
    <link href="/css/vendor/common-grid.less" rel="stylesheet/less" type="text/css">
    <link href="/css/vendor/welcome-page.less" rel="stylesheet/less" type="text/css">
    <script src="/js/less.min.js"></script>
</head>

<body>
    <!--  饼状图统计  -->
    <div class="row pie-part">
        <div class="item-wrap">
            <div class="item">
                <table>
                    <tr>
                        <td class="pie"><canvas id="pie-mileage" width="60" height="60"></canvas></td>
                        <td class="name">区域里程<span class="value">0</span><br><span class="total">总里程:&nbsp;<span class="num">0</span></span></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="item-wrap">
            <div class="item">
                <table>
                    <tr>
                        <td class="pie"><canvas id="pie-area" width="60" height="60"></canvas></td>
                        <td class="name">区域面积<span class="value">0</span><br><span class="total">总面积:&nbsp;<span class="num">0</span></span></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="item-wrap">
            <div class="item">
                <table>
                    <tr>
                        <td class="pie"><canvas id="pie-duration" width="60" height="60"></canvas></td>
                        <td class="name">区域时长<span class="value">0</span><br><span class="total">总时长:&nbsp;<span class="num">0</span></span></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="item-wrap">
            <div class="item">
                <table>
                    <tr>
                        <td class="pie"><canvas id="pie-flight-cnt" width="60" height="60"></canvas></td>
                        <td class="name">区域架次<span class="value">0</span><br><span class="total">总架次:&nbsp;<span class="num">0</span></span></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    
    <!--  图表统计  -->
    <div class="row chart-part">
        <div class="item-wrap col-md-6 col-sm-12">
            <div class="item">
                <p class="legend"><span></span>月飞机增长率</p>
                <div class="chart-wrap">
                    <canvas id="drone-cnt-chart" height="380"></canvas>
                </div>
            </div>
        </div>
        <div class="item-wrap col-md-6 col-sm-12">
            <div class="item">
                <p class="legend"><span></span>月飞行数据量增长量</p>
                <div class="chart-wrap">
                    <canvas id="flight-cnt-chart" height="380"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 登录信息 -->
    <div class="row login-info">
        <div class="item-wrap">
            <div class="item">
                <p class="new-user">本月新增用户: <span class="cnt">12366666</span><span class="unit">名</span></p>
                <p class="info">本月登录<span>123</span>次  最近登录时间：<span>2017.10.02 12:32</span></p>
            </div>
        </div>
    </div>
</body>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/Chart.min.js"></script>
<script src="/js/vendor/common.js"></script>
<script src="/js/vendor/chart-h.js"></script>
<script src="/js/vendor/welcome-page.js"></script>

<script>
    // 更新地图区域统计数据
	var pieData = {mileage:{total: 3000.22, zone:1800.22},
		area:{total: 3600.22, zone: 2000.22},
		duration:{total: 2600.22, zone:55.22},
		flightCnt:{total: 1000, zone:18}};
	welcomePageM.pieBar.update(pieData);
    
    // 更新月飞机增长率
    var droneCntData = {
        labels : ["1月","2月","3月","4月","5月","6月"],
        datasets : [
            {
                backgroundColor: "rgba(92,203,102,0.54)",
                borderColor: "rgba(92,203,102,0.2)",
                data: [0,0,60,0,0,0]
            },
        ],
    };
    welcomePageM.droneCntChart.update(droneCntData);
    
    var flightCntData = {
        labels : ["1月","2月","3月","4月","5月","6月"],
        datasets : [
            {
                backgroundColor: "rgba(82,149,255,0.85)",
                borderColor: "rgba(0,0,0,0)",
                data: [165,159,190,181,256,180]
            },
        ],
    };
    welcomePageM.flightCntChart.update(flightCntData);
</script>


</html>






